<template>
    <div class="foot">
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <router-link to=".././shopcar">
            <van-goods-action-icon icon="cart-o" text="购物车" />
            </router-link>
            
            <van-goods-action-button color="#be99ff" type="warning" @click="add" text="加入购物车" />

<van-goods-action-button color="#7232dd" type="danger" @click="buy" text="立即购买" to=".././submits"  />

            

        </van-goods-action>
    </div>
</template>

<script>
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { getClassDetail} from "../api/details";
import { Toast } from "vant";
Vue.use(Toast);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
    export default {
  data() {
    return {
      commodity: {},
      flag: true,
    };
  },
  mounted() {
    getClassDetail(this.$route.params.id)
      .then((res) => {
        this.commodity = res.data;
      })
  },
  methods: {
    add() {
      if (this.$store.state.car.carList.length != 0) {
        this.$store.state.car.carList.forEach((ele, i) => {
          if (ele.id == this.commodity.id) {
            this.flag = false;
            Toast.fail("请勿重复添加");
          }
        });
        if (this.flag) {
          this.$store.commit("SET_CARLIST", this.commodity);
          Toast.success("成功加入购物车");
        }
      } else {
        this.$store.commit("SET_CARLIST", this.commodity);
        Toast.success("成功加入购物车");
      }
    },
    buy(){
      if (this.$store.state.order.orderList.length != 0) {
        this.$store.state.order.orderList.forEach((ele, i) => {
          if (ele.id == this.commodity.id) {
            this.flag = false;
          }
        });
        if (this.flag) {
          this.$store.commit("ADD_ORDERLIST", this.commodity);
        }
      } else {
        this.$store.commit("ADD_ORDERLIST", this.commodity);
      }
    },
        
  },
};
</script>

<style scoped>

</style>